<template>
    <div class="officalItem">
        <div class="listCover">
            <img :src="officalListDetailItem.coverImgUrl" alt="" @click="">
        </div>
        <div class="listContainer">
            <slot name="listContainer"></slot>
            <table>
                <tr class="listRows" v-for="(item, index) in officalListDetailItem.tracks.slice(0,5)" :key="index" @dblclick="dblclick(item)">
                    <td class="index">{{index+1}}</td>
                    <td class="musicName">{{item.name}}</td>
                    <td class="singer">{{item.ar[0].name}}</td>
                </tr>
            </table>
            <div class="checkAll" @click="checkAll">查看全部<i class="iconfont icon-youjiantou"></i></div>
        </div>
    </div>
</template>

<script setup>
import {ref,defineProps} from 'vue'
import { defineEmits } from 'vue';
import useStore from '../store/idnex';
import { useRouter } from 'vue-router';
const router = useRouter()
const store = useStore()
const emit = defineEmits(['dblclick'])
const props = defineProps({
    officalListDetailItem:{
        type:Object,
        defaulet(){
            return {}
        }
    },
    // 封面
    cover:{
        type:String,
        defaulet(){
            return ""
        }
    },
    listId:{
        type:String,
        defaulet(){
            return ""
        }
    },
// 是否显示查看全部按钮
    isCheckAllShow:{
        type:Boolean,
        defaulet(){
            return true
        }
    }
})

// 双击item
const dblclick = (item) => {
    // 如果歌单id和store中的歌单id不一样，将歌单信息存入store
    if (props.officalListDetailItem.id != store.musicListId) {
        store.updateMuiscList({
            musicList: props.officalListDetailItem.tracks,
            musicListId: props.officalListDetailItem.id
        })
    }
    // 将双击的歌曲id传回父组件
    emit('dblclick',item.id)
}

//查看全部
const checkAll = () => {
    router.push({ name:"musicListDetail",params:{id:props.officalListDetailItem.id}})
}
</script>

<style lang="scss" scoped>
.officalItem {
    display: flex;
    margin: 20px 0 50px 0;

    .listCover {
        width: 160px;
        height: 160px;
        margin-right: 20px;
        cursor: pointer;

        img {
            width: 100%;
            border-radius: 10px;

        }
    }

    .listContainer {
        width: calc(100% - 200px);

        table {
            width: 100%;
            // 将相邻的边框合并为一个边框
            border-collapse: collapse;
            border-radius: 5px;
            overflow: hidden;

            .listRows {
                height: 35px;
                font-size: 15px;
                color: rgb(153, 153, 153);
                display: flex;
                position: relative;
                cursor: pointer;

                &:nth-child(odd) {
                    background-color: #f9f9f9;
                }
                // 注意顺序，nth-child的优先级大于hover
                &:hover {
                    background-color: #F4F4F4;
                }

                td {
                    line-height: 30px;
                }

                .index {
                    width: 40px;
                    text-align: center;
                    line-height: 28px;
                }

                .musicName {
                    color: rgb(31, 31, 31);
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    width: 80%;
                }

                .singer {
                    text-align: right;
                    position: absolute;
                    right: 15px;
                }

            }



        }
        .checkAll{
            color: rgb(134,134,134);
            font-size: 13px;
            cursor: pointer;
            line-height: 30px;
            height: 30px;
            width: 100px;
        }
    }
}
</style>